<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>159对象的解构</title>
</head>

<body>
  <h1>159对象的解构</h1>
  <script>
    /*
      一、对象的解构赋值
        1 对象的解构是将对象内的属性和方法批量赋值给一系列变量的简洁语法。
        2 对象中属性的值被赋值给与属性名相同的变量。
        3 对象中找不到和变量名相同的属性时，变量的值为undefined。
    */
    let obj = {
      myName: 'lqj',
      age: 18
    }
    let { myName, age: newAge } = obj // 如果变量名age已经被占用，则重新命名即可
    // 等价于
    // let myName = obj.myName
    // let age = obj.age
    // 一种是一个一个的赋值。解构是批量的赋值。
    console.log(myName, newAge)

    // 练习
    const pig = {
      name: 'peiqi',
      age: 6
    }
    let { name: uname, age } = pig
    console.log(uname, age)

    // 解构数组对象
    const goods = [
      {
        goodsName: 'xiaomi',
        price: 9999
      }
    ]
    let [{ goodsName, price }] = goods
    console.log(goodsName, price)

    // 解构多级数据结构
    const a = {
      ha: 'ha',
      hobby: [
        1, 2, 3
      ]
    }
    let { ha, hobby: [j, k, l] } = a
    console.log(ha, j, k, l)

    // 练习
    const msg = {
      code: 200,
      msg: '新闻列表',
      data: [
        {
          id: 1,
          title: 'xxx',
          count: 111
        },
        {
          id: 1,
          title: 'xxx',
          count: 111
        },
        {
          id: 1,
          title: 'xxx',
          count: 111
        }
      ]
    }
    let { code, msg: news, data } = msg
    console.log(code, news, data)
  </script>
</body>

</html>